<template>
  <div class="comment-reply">
    <!-- 导航栏 -->
    <van-nav-bar 
      :title="currentComment.reply_count ? `${currentComment.reply_count}条回复`:'暂无回复' ">
      <van-icon
        slot="left"
        name="cross"
        @click="$emit('click-close')"
      />
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- 当前评论项 -->
    <comment-item :comment-info="currentComment" />
    <!-- /当前评论项 -->

    <van-cell title="所有回复" />

    <!-- 评论的回复列表 -->
    <comment-list 
      :list="commentList"
      :source-id="currentComment.com_id" 
      type="c"
    />
    <!-- /评论的回复列表 -->

     <!-- 底部 -->
    <div class="post-wrap">
      <van-button 
        type="default" 
        size="small" 
        class="post-btn"
        @click="isCommentReplyShow=true">写评论</van-button>
    </div>
    <!-- /底部 -->

    <!-- 评论的回复 -->
    <van-popup v-model="isCommentReplyShow" position="bottom">
      <comment-post
        :target-id="currentComment.com_id"
        :list="commentList"
        :article-id="articleId"
        @close="close"
      />
    </van-popup>
    <!-- /评论的回复 -->

  </div>
</template>

<script>
import CommentItem from './comment-item'
import CommentList from './comment-list'
import CommentPost from './comment-post'
export default {
  name: 'CommentReply',
  components: {CommentItem,CommentList,CommentPost},
  props: {
    // 当前评论项内容
    currentComment:{
      type:Object,
      require:true
    },
    // 文章ID
    articleId:{
      type:[Object,String,Number],
      require:true
    }
  },
  data () {
    return {
      commentList:[], // 评论回复列表数据
      // 实现 comment-list 和  comment-post 共享 回复列表数据
      isCommentReplyShow:false // 评论回复是否显示
    }
  },
  methods: {
    // 关闭评论回复，且让评论回复数量+1
    close(){
      this.isCommentReplyShow=false
      this.currentComment.reply_count++
    }
  }
}
</script>

<style scoped lang="less">
.post-wrap{
  position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.17333rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-top: 0.01333rem solid #d8d8d8;
    .post-btn{
      width: 60%;
    }
}
</style>
